var vie_car_edit = vie_fwk_base_page.extend({
    tagName: 'div',
    car: null,
    initialize: function(options){
        this.initVars(options);
        $('a#current-section').html('Cars');
        this.pageHeadModel.setToolbarId(this.getContainerId());
        if(this.options.car != null){
            this.pageHeadModel.set('title', 'Edit Car')
            this.pageHeadModel.set('description', '');
            this.car = __app.colls.cars.get(this.options.car);
        }else{
            this.pageHeadModel.set('title', 'Add A Car');
            this.pageHeadModel.set('description', 'this will make the car available to add to races');
            this.car = new mod_car();
        }
        this.pageHeadModel.addButton('icon-list', 'My Cars', '#cars');
    },
    render: function(){
        this.pageBody = new vie_car_edit_form({model: this.car, collection: new coll_fwk_base_form_fields()});
        this.displayToMain();
        $("select[data-type='select']", $('#'+this.getContainerId())).mobiscroll().select({ 
            theme: 'android-ics',
            display: 'modal',
            mode: 'scroller',
            width: 200, 
            inputClass: 'input-xlarge'
        });
        $('input[id$="_dummy"]').removeAttr('readOnly');
        $('textarea', $('#'+this.getContainerId())).autogrow();
        return this;
    }
});


var vie_car_edit_form = vie_fwk_base.extend({
    tagName: 'div',
    className: 'well',
    fieldsCont: null,
    formView: null,
    formModel: null,
    fieldNameSpace: null,
    initialize: function(){
        this.fieldNameSpace = 'car-edit-form'+(typeof this.model.get('id') != 'undefined'?('-' + this.model.get('id')): '') + '-';
        var that = this;
        var onSubmit = function(){
            that.formSubmit.apply(that, arguments);
        };
        this.formModel = new mod_fwk_base_form({
            formId: 'cars-edit' + (typeof this.model.get('id') != 'undefined'?('-' + this.model.get('id')): ''),
            onSubmit: onSubmit
        });
        this.setFormFields();
    },
    render: function(){
        this.formView = new vie_fwk_base_form({model: this.formModel, collection: this.collection});
        $(this.el).html(this.formView.render().el);
        return this;    
    },
    formSubmit: function(formObj, ev){
        ev.preventDefault();
        var formVals = formObj.getValues();
        var submitVals = {};
        _.each(formVals, function(val, key){
                var fieldName = key.replace(this.fieldNameSpace, '');
                if(key != this.fieldNameSpace + 'save-button'){
                    submitVals[fieldName] = val;
                }
        }, this);
        this.model.set(submitVals);
        this.model.setDateMod();
        //this.model.save();
        if(typeof this.model.validationError != 'undefined' && this.model.validationError != null && this.model.validationError.length > 0){
            _.each(this.model.validationError, function(errorObj){
                var fieldId = this.fieldNameSpace + errorObj.name;
                var field = $('#' + fieldId, this.$el);
                field.parent().parent().addClass('error');
                var fieldHelpBlock = field.parent().find('p.help-block');
                fieldHelpBlock.html(errorObj.message);
            }, this);
        }else{
            if(typeof this.model.get('id') == 'undefined') __app.colls.cars.create(this.model);
            __app.router.navigate('cars', {trigger: true, replace: false});
        }
        
    },
    fieldChange: function(formFieldObj, ev){
        if(formFieldObj.$el.hasClass('error')){
            formFieldObj.$el.find('p.help-block').html('');
            formFieldObj.$el.removeClass('error');
        }
    },
    setFormFields: function(){
        var that = this;
        var onFieldChange = function(){
            that.fieldChange.apply(that, arguments);
        }
        //name
        //label, type, value, name, selectOptions, onChange
        this.collection.addField('name', 'text', this.model.get('name'), this.fieldNameSpace + 'name', null, onFieldChange); 
        //cowl
        this.collection.addField('cowl', 'text', this.model.get('cowl'), this.fieldNameSpace + 'cowl', null, onFieldChange); 
        //gear
        this.collection.addField('gear ratio', 'select', this.model.get('gear').key, this.fieldNameSpace + 'gear', __app.getList('gearTypes'), null); 
        //engine
        this.collection.addField('engine', 'select', this.model.get('engine').key, this.fieldNameSpace + 'engine', __app.getList('engineTypes'), null); 
        //brakes
        this.collection.addField('brakes', 'select', this.model.get('brakes').key, this.fieldNameSpace + 'brakes', __app.getList('brakeTypes'), null); 
        //status
        this.collection.addField('status', 'select', this.model.get('status').key, this.fieldNameSpace + 'status', __app.getList('carStatusTypes'), null); 
        //note
        this.collection.addField('notes', 'textarea', this.model.get('note'), this.fieldNameSpace + 'note', null, null);
        //save 
        this.collection.addField(null, 'button', 'save', this.fieldNameSpace + 'save-button', new Array(), null);
    }
});
